<template>
  <div>
    <Header :addTodo="addTodo"></Header>
    <Content
      :Todos="Todos"
      :doneTodos="doneTodos"
      :checkTodo="checkTodo"
      :changeStateTodo="changeStateTodo"
    ></Content>
    <Footer :checkAllTodo="checkAllTodo"></Footer>
  </div>
</template>

<script>
// 引入子组件
import Header from "@/views/memo/header/index.vue";
import Content from "@/views/memo/content/index.vue";
import Footer from "@/views/memo/footer/index.vue";
export default {
  data() {
    return {
      // 未完成的数据
      Todos: JSON.parse(localStorage.getItem("Todos")) || [],
      // 已完成的数据
      doneTodos: JSON.parse(localStorage.getItem("doneTodos")) || [],
    };
  },
  methods: {
    // 向Todos添加todo
    addTodo(val) {
      this.Todos.unshift(val);
    },
    // 向doneTodos添加todo
    addDoneTodo(val) {
      this.doneTodos.unshift(val);
    },
    // 删除todo
    checkTodo(id) {
      this.Todos = this.Todos.filter((todo) => {
        return todo.id !== id;
      });
      this.doneTodos = this.doneTodos.filter((todo) => {
        return todo.id !== id;
      });
    },
    // 删除全部的todo
    checkAllTodo() {
      this.Todos = this.Todos.filter((todo) => {
        return todo.done !== true;
      });
      this.doneTodos = this.doneTodos.filter((todo) => {
        return todo.done !== true;
      });
    },
    // 改变勾选状态
    changeStateTodo(id) {
      let flag = true;
      this.Todos.forEach((todo) => {
        if (todo.id == id && flag) {
          // 将复选框的状态改变
          todo.done = !todo.done;
          // 删除与传入id相同的todo
          this.checkTodo(id);
          // 添加todo
          this.addDoneTodo(todo);
          // 将flag改变，避免继续循环doneTodos
          flag = false;
        }
      });
      this.doneTodos.forEach((todo) => {
        if (todo.id == id && flag) {
          // 将复选框的状态改变
          todo.done = !todo.done;
          // 删除与传入id相同的todo
          this.checkTodo(id);
          // 添加todo
          this.addTodo(todo);
        }
      });
    },
  },
  components: {
    Header,
    Content,
    Footer,
  },
  watch: {
    // 监听未完成的数据
    Todos: {
      deep: true,
      handler(value) {
        localStorage.setItem("Todos", JSON.stringify(value));
      },
    },
    // 监听已完成的数据
    doneTodos: {
      deep: true,
      handler(value) {
        localStorage.setItem("doneTodos", JSON.stringify(value));
      },
    },
  },
};
</script>

<style lang="less" scoped>
@media screen and (max-device-width: 620px) {
  section {
    width: 96%;
    padding: 0 2%;
  }
}
@media screen and (min-width: 620px) {
  section {
    width: 600px;
    padding: 0 10px;
  }
}
</style>